<html lang="zh-CN">
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <style>
        .el-dialog__body {
            /*height: 30vh;*/
            overflow: auto;
        }

        @media (max-width: 1366px) {
            #roleManage .table-wrap {
                height: 500px !important;;
                overflow: auto;
            }
        }
    </style>
</head>
<body>
<div id="roleManage" class="center_div" style="display:none;">
    <div class="searchForm" style="margin-top: 1%;margin-left: 1%">
        <template>
            角色：
            <el-input v-model="name" size="mini" style="width: 10%"></el-input>
        </template>
        <el-button type="primary" size="mini" @click="query">查询</el-button>
        <el-button type="primary" size="mini" @click="add">添加</el-button>
    </div>
    <div class="table-wrap" style="margin-left: 1%">
        <el-table
                :data="tableData"
                style="width:100%;text-align: center"
                header-cell-style="font-size:15px;text-align:center;color:#515A6E;padding:10px 0px 10px 0px !important;background:#F5F5F6;border:1px solid #EBEBEB"
                cell-style="font-size:13px;text-align:center;color:#606266;padding:5px 0px 5px 0px !important;border:1px solid #EBEBEB">
           <!-- <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>-->
            <el-table-column v-for="title in tableTitle" :prop="title.prop" :label="title.label">
            </el-table-column>
            <template v-if="buttons && buttons.length!==0">
                <el-table-column
                        class="align-right"
                        width="230px"
                        label="操作">
                    <template slot-scope="scope">
                        <el-button v-for="button in buttons"
                                   @click="operate(scope.row,button.href)" :type="button.type"
                                   class="el-button el-button--text el-button--medium">{{button.label}}
                        </el-button>
                    </template>
                </el-table-column>
            </template>
        </el-table>
        <el-pagination
                layout="prev, pager, next"
                @current-change="changePageNum"
                :current-page="pageNum"
                :page-size="pageSize"

                :total="total">
        </el-pagination>
    </div>
    <div>
        <el-dialog :title="title"
                   :visible.sync="showBox"
                   width="30%"
                   @close="closeDialog"
                   append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="mini">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="角色"   prop="name">
                            <el-input v-model="form.name" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述"   prop="remark">
                            <el-input v-model="form.remark" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="12">
                         <el-form-item label="排序" :required="true">
                             <el-input v-model="form.SEQ" clearable></el-input>
                         </el-form-item>
                     </el-col>-->
                </el-row>
                <el-row>
                    <!-- <el-col :span="12">
                         <el-form-item label="上级角色" :required="true">
                             <el-select v-model="form.PID" placeholder="请选择">
                                 <el-option
                                         v-for="item in roleOptions"
                                         :key="item.ID"
                                         :label="item.name"
                                         :value="item.ID">
                                 </el-option>
                             </el-select>
                         </el-form-item>
                     </el-col>-->
                    <el-col :span="12">
                        <el-form-item label="权限组"   prop="authorityGroup">
                            <el-select v-model="form.authorityGroup"
                                       placeholder="请选择"
                                       :loading="loadingGrp"
                            >
                                <el-option
                                        v-for="item in authorityGrpOptions"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="showBox = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="comfirm" size="mini">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</div>
</body>
<script>
    VueComponent.createRoleManage = function () {
        if (window.roleManageVue) {
            return;
        }
        window.roleManageVue = new Vue({
            el: "#roleManage",
            data: {
                name: '',
                rules: {
                    name: [
                        {required: true, message: '请输入名称', trigger: 'blur'},
                        {min: 1, max: 20, message: '长度不能超过20个字符', trigger: 'blur'}
                    ], authorityGroup: [
                        {required: true, message: '请选择权限组', trigger: 'blur'},
                    ],
                    remark: [
                        {min: 1, max: 128, message: '长度不能超过128个字符', trigger: 'blur'}
                    ],
                },
                tableTitle: [
                    {label: '角色', prop: 'name'},
                    {label: '描述', prop: 'remark'},
                    {label: '权限组', prop: 'authorityGroupName'}
                ],
                tableData: [],
                total: 0,
                type: 0,
                pageNum: 1,
                pageSize: 15,
                buttons: [{label: "编辑", href: "update"}, {label: "删除", href: "delete"}],
                showBox: false,
                loadingGrp: false,
                showAdd: true,
                title: '',
                form: {
                    id: '',
                    name: '',
                    remark: '',
                    authorityGroup: '',
                 },
                roleOptions: [],
                authorityGrpOptions: []
            },
            mounted: function () {
                this.query();
                // this.getRoleOptions();
            },
            methods: {
                closeDialog(){
                    this.$refs["form"].resetFields();

                },

                comfirm(){
                    if (this.type === 0) {
                        this.updateRole();
                    } else {
                        this.addRole();
                    }
                },
                query: function () {
                    console.info("查询角色");
                    var data = {
                        name: this.name || '',
                        fleetId: window.fleetId,
                        pageNum: this.pageNum,
                        pageSize: this.pageSize
                    };
                    axios.post('/scs/roleManage/getRole', data)
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    this.tableData = data.obj.list;
                                    this.total = data.obj.total;
                                } else {
                                    this.$message(res.msg());
                                }
                            } else {
                                this.$message('查询失败');
                            }
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                /* getRoleOptions:function () {
                 axios.post('/scs/roleManage/getRoleOptions', {})
                 .then(function (res) {
                 if (res.status === 200) {
                 var data = res.data;
                 if (res.data.success) {
                 this.roleOptions=data.obj.list;
                 } else {
                 this.$message(res.msg);
                 }
                 } else {
                 this.$message(res.msg);
                 }
                 }.bind(this)).catch(function () {

                 }.bind(this));
                 },*/
                getAuthorityGroupOptions: function (row) {
                    this.loadingGrp = true;
                    var that = this;
                    axios.post('/scs/authorityGroupManage/getAuthorityGroup', {fleetId: window.fleetId})
                        .then(function (res) {
                            if (res.status === 200) {
                                var data = res.data;
                                if (res.data.success) {
                                    that.authorityGrpOptions = data.obj.list;
                                    that.authorityGrpCount = data.obj.total;
                                    if(that.type === 0){
                                        that.showBox = true;
                                        that.showAdd = false;
                                        that.title = "编辑";
                                        that.type = 0;
                                        that.form.id = row.id;
                                        that.form.name = row.name;
                                        that.form.authorityGroup = row.authorityGroup;
                                        that.form.remark = row.remark;
                                    }else {
                                        that.showBox = true;
                                        that.showAdd = true;
                                        that.title = "添加角色";
                                    }
                                } else {
                                    that.$message("查询权限组失败");
                                }
                            } else {
                                that.$message("查询权限组失败");
                            }
                            that.loadingGrp = false;
                        }.bind(this)).catch(function () {

                    }.bind(this));
                },
                add: function () {
                    var that = this;
                    that.type = 1;
                    this.getAuthorityGroupOptions(null);


                },
                addRole: function () {
                    var validate = false;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            validate = true;
                        } else {
                            console.log('error submit!!');
                            validate = false;
                            return false;
                        }
                    });
                    if (validate === false) {
                        return;
                    }



                    var that = this;
                    var data = {
                        name: this.form.name,
                        remark: this.form.remark,
                        fleetId: window.fleetId,
                        authorityGroup: this.form.authorityGroup,
                    };
                    axios.post('/scs/roleManage/addRole', data)
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {

                                that.closeBox();
                                that.$message('添加成功');
                                that.query();
                                //that.getRoleOptions();

                            } else {
                                that.$message('添加失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                updateRole: function () {
                    var validate = false;
                    this.$refs["form"].validate((valid) => {
                        if (valid) {
                            validate = true;
                        } else {
                            console.log('error submit!!');
                            validate = false;
                            return false;
                        }
                    });
                    if (validate === false) {
                        return;
                    }
                    var that = this;
                    var data = {
                        id: that.form.id,
                        name: this.form.name,
                        remark: this.form.remark,
                        authorityGroup: this.form.authorityGroup,
                    };
                    axios.post('/scs/roleManage/updateRole', data)
                        .then(function (res) {
                            var res = res.data;
                            if (res.success) {
                                that.closeBox();
                                that.$message('编辑成功');
                                that.query();
                                // that.getRoleOptions();

                            } else {
                                that.$message('编辑失败');
                            }
                        })
                        .catch(function (err) {
                            console.log(err);
                        });
                },
                closeBox: function () {
                    this.showBox = false;
                },
                operate: function (row, href) {
                    var that = this;
                    if (href.indexOf('update') !== -1) {
                        that.type = 0;

                        this.getAuthorityGroupOptions(row);

                    } else {
                        this.$confirm('是否确定删除', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            axios.post('/scs/roleManage/deleteRole', {id: row.id})
                                .then(function (res) {
                                    var res = res.data;
                                    if (res.success) {
                                        that.$message('删除成功');
                                        //此时已经实现删除操作，所以total的值需要减1，Math.ceil是向上取整，保证始终大于等于1
                                        const totalPage = Math.ceil((that.total - 1) / that.pageSize);
                                        //记住删除最后一条数据时当前码是最后一页
                                        const tempPageNum = that.pageNum > totalPage ? totalPage : that.pageNum;
                                        //实现跳转
                                        that.pageNum = tempPageNum < 1 ? 1 : tempPageNum;
                                        that.query();
                                    }
                                })
                                .catch(function (err) {
                                    console.log(err);
                                });
                        });
                    }
                },
                changePageNum: function (val) {
                    this.pageNum = val;
                    this.query();
                },
            }
        });
    }
</script>
</html>
